<template>
    <view class="app-image cross-center main-center">
        <image :src="props.src" :style="style" :mode="props.mode"></image>
    </view>
</template>

<script setup lang='ts' name="AppImage">

export interface AppImageProps {
    src: string
    width?: string
    height?: string
    /**图片裁剪、缩放的模式 */
    mode?: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right'
}

const props = withDefaults(defineProps<AppImageProps>(), {
    mode: 'scaleToFill',
    blur: 0
})

const style = computed(() => {
    let data = ''
    if (props.width && props.height) {
        data += `width:${props.width}rpx;height:${props.height}rpx`
    }
    return data
})

</script>

<style scoped lang="scss">
.app-image,
image {
    width: 100%;
    height: 100%;
}
</style>